<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">

	<ui:define name="content">
		<h1 class="title ui-widget-header ui-corner-all">Menu</h1>
		<div class="entry">
			<p>Menu is a highly customizable navigation/command component that supports dynamic and static positioning.</p>
			
			<h:form>
			
				<p:growl id="messages"/>
                                
				<h3>Plain Menu</h3>
				<p:menu>
					<p:submenu label="Ajax Menuitems">
						<p:menuitem value="Save" actionListener="#{menuBean.save}" update="messages" icon="ui-icon-disk" />
						<p:menuitem value="Update" actionListener="#{menuBean.update}" update="messages" icon="ui-icon-arrowrefresh-1-w"/>
					</p:submenu>
					<p:submenu label="Non-Ajax Menuitem">
						<p:menuitem value="Delete" actionListener="#{menuBean.delete}" update="messages" ajax="false" icon="ui-icon-close"/>
					</p:submenu>
					<p:submenu label="Navigations">
						<p:menuitem value="External" url="http://www.primefaces.org" icon="ui-icon-home"/>
						<p:menuitem value="Internal" outcome="/mobile/index" icon="ui-icon-star"/>
					</p:submenu>
				</p:menu>

                <h3>Overlay</h3>
				<p:commandButton id="dynaButton" value="Show" type="button"/>
                <p:menu overlay="true" trigger="dynaButton" my="left top" at="left bottom">
					<p:submenu label="Ajax Menuitems">
						<p:menuitem value="Save" actionListener="#{menuBean.save}" update="messages" icon="ui-icon-disk"/>
						<p:menuitem value="Update" actionListener="#{menuBean.update}" update="messages" icon="ui-icon-arrowrefresh-1-w"/>
					</p:submenu>
					<p:submenu label="Non-Ajax Menuitem">
						<p:menuitem value="Delete" actionListener="#{menuBean.delete}" update="messages" ajax="false" icon="ui-icon-close"/>
					</p:submenu>
					<p:submenu label="Navigations">
						<p:menuitem value="External" url="http://www.primefaces.org" icon="ui-icon-home"/>
						<p:menuitem value="Internal" outcome="/mobile/index" icon="ui-icon-star"/>
					</p:submenu>
				</p:menu>
                
                <h3>Programmatic Menu</h3>
				<p:menu model="#{menuBean.model}"/>

			</h:form>
			
			<h3>Source</h3>
			<p:tabView>
				<p:tab title="menu.xhtml">
                    <pre name="code" class="xml">
&lt;h:form&gt;

    &lt;p:growl id="messages"/&gt;

    &lt;h3&gt;Plain Menu&lt;/h3&gt;
    &lt;p:menu&gt;
        &lt;p:submenu label="Ajax Menuitems"&gt;
            &lt;p:menuitem value="Save" actionListener="\#{menuBean.save}" update="messages" icon="ui-icon-disk" /&gt;
            &lt;p:menuitem value="Update" actionListener="\#{menuBean.update}" update="messages" icon="ui-icon-arrowrefresh-1-w"/&gt;
        &lt;/p:submenu&gt;
        &lt;p:submenu label="Non-Ajax Menuitem"&gt;
            &lt;p:menuitem value="Delete" actionListener="\#{menuBean.delete}" update="messages" ajax="false" icon="ui-icon-close"/&gt;
        &lt;/p:submenu&gt;
        &lt;p:submenu label="Navigations"&gt;
            &lt;p:menuitem value="External" url="http://www.primefaces.org" icon="ui-icon-home"/&gt;
            &lt;p:menuitem value="Internal" outcome="/mobile/index" icon="ui-icon-star"/&gt;
        &lt;/p:submenu&gt;
    &lt;/p:menu&gt;

    &lt;h3&gt;Overlay&lt;/h3&gt;
    &lt;p:commandButton id="dynaButton" value="Show" type="button"/&gt;
    &lt;p:menu overlay="true" trigger="dynaButton" my="left top" at="left bottom"&gt;
        &lt;p:submenu label="Ajax Menuitems"&gt;
            &lt;p:menuitem value="Save" actionListener="\#{menuBean.save}" update="messages" icon="ui-icon-disk"/&gt;
            &lt;p:menuitem value="Update" actionListener="\#{menuBean.update}" update="messages" icon="ui-icon-arrowrefresh-1-w"/&gt;
        &lt;/p:submenu&gt;
        &lt;p:submenu label="Non-Ajax Menuitem"&gt;
            &lt;p:menuitem value="Delete" actionListener="\#{menuBean.delete}" update="messages" ajax="false" icon="ui-icon-close"/&gt;
        &lt;/p:submenu&gt;
        &lt;p:submenu label="Navigations"&gt;
            &lt;p:menuitem value="External" url="http://www.primefaces.org" icon="ui-icon-home"/&gt;
            &lt;p:menuitem value="Internal" outcome="/mobile/index" icon="ui-icon-star"/&gt;
        &lt;/p:submenu&gt;
    &lt;/p:menu&gt;

    &lt;h3&gt;Programmatic Menu&lt;/h3&gt;
    &lt;p:menu model="\#{menuBean.model}"/&gt;

&lt;/h:form&gt;
                    </pre>
				</p:tab>
				
				<p:tab title="MenuBean.java">
<pre name="code" class="java">
package org.primefaces.examples.view;

import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;
import org.primefaces.component.menuitem.MenuItem;
import org.primefaces.component.submenu.Submenu;
import org.primefaces.model.DefaultMenuModel;
import org.primefaces.model.MenuModel;

public class MenuBean {

	private MenuModel model;

	public MenuBean() {
		model = new DefaultMenuModel();
		
		//First submenu
		Submenu submenu = new Submenu();
		submenu.setLabel("Dynamic Submenu 1");
		
		MenuItem item = new MenuItem();
		item.setValue("Dynamic Menuitem 1.1");
		item.setUrl("#");
		submenu.getChildren().add(item);
		
		model.addSubmenu(submenu);
		
		//Second submenu
		submenu = new Submenu();
		submenu.setLabel("Dynamic Submenu 2");
		
		item = new MenuItem();
		item.setValue("Dynamic Menuitem 2.1");
		item.setUrl("#");
		submenu.getChildren().add(item);
		
		item = new MenuItem();
		item.setValue("Dynamic Menuitem 2.2");
		item.setUrl("#");
		submenu.getChildren().add(item);
		
		model.addSubmenu(submenu);
	}

	public MenuModel getModel() {
		return model;
	}	
    
    public void save() {
		addMessage("Data saved");
	}
	
	public void update() {
		addMessage("Data updated");
	}
	
	public void delete() {
		addMessage("Data deleted");
	}
	
	public void addMessage(String summary) {
		FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, summary,  null);
		FacesContext.getCurrentInstance().addMessage(null, message);
	}
}
			</pre>
				</p:tab>
			</p:tabView>
      	</div>
 
</ui:define>
</ui:composition>
				